<template>
    <div style="height:100%;">
        <!--路径导航-->
        <div class="box path">
            首页 > 员工管理 > 员工列表
        </div>

        <!--内容-->
        <div class="box mains">
            <!--操作按钮-->
            <div class="buttons">
                <el-row>
                    <el-col :span="12" style="text-align:left;">
                        <el-button type="info" size="mini" @click="dialogAdd" icon="el-icon-upload2">导入</el-button>
                        <el-button type="danger" size="mini" @click="eventDeleteAll" icon="el-icon-remove">禁用</el-button>
                    </el-col>
                    <el-col :span="12" style="text-align:right;">
                        <el-input type="text" v-model="search.key" size="mini" style="width:300px;"></el-input>
                        <el-button type="success" size="mini" icon="el-icon-search" @click="eventSearch">查询</el-button>
                    </el-col>
                </el-row>
            </div>

            <!--显示列表-->
            <div class="contents">
                <el-table :data="listData" style="width:100%" @selection-change="tableSelectChange">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column prop="eNo" label="工号" width="80"></el-table-column>
                    <el-table-column prop="name" label="姓名" ></el-table-column>
                    <el-table-column prop="" label="年龄" width="80"></el-table-column>
                    <el-table-column prop="" label="性别" width="80"></el-table-column>
                    <el-table-column prop="" label="部门" width="120"></el-table-column>
                    <el-table-column prop="" label="职务" width="120"></el-table-column>                    
                    <el-table-column prop="lastLoginTime" label="入职日期" width="150"></el-table-column>
                    <el-table-column label="状态" width="150">
                        <template slot-scope="scope">
                            <!-- if(scope.row.statue==0)  正常
                        else  禁用 -->
                            <template v-if="scope.row.statue == '0'">
                                <el-tag type="success" size="mini">正常</el-tag>
                            </template>
                            <template v-else>
                                <el-tag type="danger" size="mini">已禁用</el-tag>
                            </template>

                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="info" size="mini" @click="dialogEdit(scope.row)" title="编辑">
                                <i class="el-icon-edit"></i>
                            </el-button>
                            <el-button type="warning" size="mini" @click="eventDelete(scope.row.id)" title="删除">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="pages">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    current-page.sync="paged.pageIndex" :page-size="paged.pageSize" layout="total, prev, pager, next" :total="paged.total">
                </el-pagination>
            </div>
        </div>


        <!--弹出层-->
        <div style="text-align:left;">
            <el-dialog title="导入员工信息" :visible.sync="dialogUploadVisible" width="35%">
                <!-- <el-upload class="upload-demo" action="http://localhost:8087/employee/import" :on-preview="handlePreview"
                    :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                    :on-exceed="handleExceed" :on-success="handleSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div>
                    <el-button type="danger" size="mini" @click="enevtSubmit">提交</el-button>
                </div> -->


                <el-upload class="upload-demo" ref="upload" action="http://localhost:5087/employee/import"
                    :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" 
                    :auto-upload="false" :on-success="handleSuccess">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="enevtSubmit">上传到服务器
                    </el-button>
                </el-upload>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listData: [],
            selectTableValue: [],
            dialogUploadVisible: false,
            fileList: [],
            paged:{
                pageIndex:1,
                pageSize:8,
                total:0
            },
            search:{
                key:''
            }
        }
    },
    mounted() {
        this.initData()
    },
    methods: {

        //表格选择事件
        tableSelectChange(val) {
            this.selectTableValue = val
            console.log(this.selectTableValue)
        },

        //弹出 - 添加按钮
        dialogAdd() {
            this.dialogUploadVisible = true
        },

        //弹出 - 编辑按钮
        dialogEdit(row) {
            this.dialogUploadVisible = true

            //this.editForm = row

            this.id = row.id

            this.editForm.empNo = row.empNo
            this.editForm.name = row.name
            this.editForm.password = row.password

        },

        //提交按钮事件
        enevtSubmit() {
            this.$refs.upload.submit();
        },

        //批量删除按钮事件
        eventDeleteAll() {
            let data = []

            this.selectTableValue.forEach(x => {
                data.push(x.id)  //指删除时，删除选中的多条（选中的数据是根据table的选择改变事件中获取）
            })

            if (confirm('确认要删除该条记录吗?')) {
                this._delete(data)
            }
        },
        //单删除按钮事件
        eventDelete(id) {
            let data = []
            data.push(id)  //单删时，只删除一条记录（删除按钮在插槽中，所以用scope.row.di传值过来）
            if (confirm('确认要删除该条记录吗?')) {
                this._delete(data)
            }

        },
        //删除功能的封装（后台封装的参数是 多个id字符串 :[List<string> ids]）
        _delete(data) {

            //在axios.delete的方法中，参数是两个 delete(url[,config])),和get的参数是一样，所以在写法上需要用大括号{}包括
            this.$http.delete(this.$baseUrl + 'user', { data: data }).then(res => {
                this.$message(res.data.message)
                if (res.data.code == 200)
                    this.initData()
            })
        },

        //初始化数据（页面在加载的时候执行，或点查询按钮的时候可以执行）
        initData() {
            this.$http.get(this.$baseUrl + 'employee',{
                params:{
                    key:this.search.key,
                    pageIndex:this.paged.pageIndex,
                    pageSize:this.paged.pageSize
                }
            }).then(x => {
                //console.log(x)
                this.listData = x.data.data.item
                this.paged.total = x.data.data.total
            })
        },

        //查询按钮事件
        eventSearch(){
            this.initData()
        },

        //分页相关事件
        handleSizeChange(val) {
            this.paged.pageSize = val
            this.initData()
        },
        handleCurrentChange(val) {
            this.paged.pageIndex = val
            this.initData()
        },

        //上传文件相关
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleSuccess(response) {
            console.log(response)
            this.$message(response.message)
            if(response.data)
            {
                this.dialogUploadVisible = false
                
                this.initData()
            }
        }
    }
}
</script>
